<!--  -->
<template>
  <div class="category-container">
    <!-- 头部 -->
    <van-nav-bar title="商品分类" fixed :z-index="100" @click-left="onBack">
      <template #left>
        <van-icon name="arrow-left" size="20" color="#fff" />
      </template>
    </van-nav-bar>
    <!-- 内容区域 -->
    <div class="content">
      <div class="left-wrapper" ref="leftWrapper">
        <ul class="type-list">
          <li
            class="type-item"
            :class="{ active: activeIndex === index }"
            v-for="(item, index) in categoryList"
            :key="item.cat_id"
            @click="switchType(index)"
          >
            {{ item.cat_name }}
          </li>
        </ul>
      </div>
      <div
        class="right-wrapper"
        v-if="
          categoryList[activeIndex] &&
          categoryList[activeIndex].children &&
          categoryList[activeIndex].children.length
        "
      >
        <div
          class="right-list"
          v-for="item in categoryList[activeIndex].children"
          :key="item.cat_id"
        >
          <div
            class="right-title"
            v-if="item && item.children && item.children.length"
          >
            / {{ item.cat_name }} /
          </div>
          <ul
            class="product-list"
            v-if="item && item.children && item.children.length"
          >
            <li
              class="product-item"
              v-for="product in item.children"
              :key="product.cat_id"
              @click="toGoodsList(product.cat_name,product.cat_id)"
            >
              <img :src="product.cat_icon" alt="" />
              <span>{{ product.cat_name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部标签栏 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "@/components/tabbar";
import { NavBar, Icon } from "vant";
import { getCategories } from "@/network/front/api";
export default {
  data() {
    return {
      categoryList: [],
      activeIndex: 0,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getCategoriesData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //返回上一页
    onBack() {
      this.$router.back();
    },
    //请求商品分类数据
    async getCategoriesData() {
      let res = await getCategories({ url: "/categories" });
      if (res.message) {
        this.categoryList = res.message;
      }
    },
    //切换商品分类
    switchType(index) {
      this.activeIndex = index;
    },
    //去商品列表页面
    toGoodsList(name,cat_id) {
      this.$router.push({
        name: "List",
        query: {
          type: name,
          cat_id
        },
      });
    },
  },
  components: {
    tabbar,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.category-container >>> .van-nav-bar__content {
  background-color: #ff734c;
}
.category-container >>> .van-nav-bar__title {
  color: #fff;
}
.content {
  display: flex;
}
.left-wrapper {
  position: absolute;
  top: 46px;
  bottom: 51px;
  overflow: auto;
  width: 100px;
  background-color: #f7f8fa;
}
.left-wrapper .type-item {
  box-sizing: border-box;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-left: 4px solid #f7f8fa;
}
.left-wrapper .type-item.active {
  color: #f00;
  border-color: #ff734c;
  background-color: #fff;
}
.right-wrapper {
  flex: 1;
  position: absolute;
  left: 100px;
  right: 0;
  top: 46px;
  bottom: 51px;
  overflow: auto;
}
.right-list .right-title {
  text-align: center;
  font-size: 20px;
  padding: 10px 0;
}
.right-list .product-list {
  display: flex;
  flex-wrap: wrap;
}
.right-list .product-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33.33333%;
  margin-bottom: 10px;
}
.right-list .product-item img {
  width: 50px;
  height: 50px;
}
.right-list .product-item span {
  font-size: 14px;
  margin: 4px 0;
}
</style>